<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<title>团队成员管理</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/base.css" />
<link rel="stylesheet" type="text/css" href="../../Content/css/user.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<header id="header">
    <!--头部文件从最下面load读取 ../public/head.html--> 
</header>
<div id="left">
	<!--菜单文件从最下面load读取 ../public/mainLeft.html-->
</div>
<div class="main-right container-fluid" id="mainRight">
    <div class="container-fluid">
        <div class="search-bar clearfix">
        	<div class="btn-group pull-left" id="btnRadio">
				<button class="btn btn-primary" type="button">全部</button>
				<button class="btn btn-default" type="button">开放的账户</button>
				<button class="btn btn-default" type="button">已关闭账号</button>
			</div>
			<div class="pull-right">
				<a class="btn btn-success">新增成员</a>
			</div>
        </div>
        <div class="content">
        	<div class="mylist">
	        	<table class="table table-hover text-center" border="0" cellpadding="0" cellspacing="0">
	                <thead>
	                    <tr>
	                        <th class="text-left">姓名</th>
	                        <th>分组</th>
	                        <th>手机</th>
	                        <th>办公电话</th>
	                        <th>邮件</th>
	                        <th>状态</th>
	                        <th>操作</th>
	                    </tr>
	                </thead>
	                <tbody>
	                	<tr>
	                		<td class="text-left">
	                			李淼可
	                			<a href="#" class="btn-beizhu"  data-toggle="modal" data-title="李淼可"><span class="glyphicon glyphicon-file"></span></a>
	                		</td>
	                		<td>HR</td>
	                		<td>15100235858</td>
	                		<td>010-5964865</td>
	                		<td>l157896543@126.com</td>
	                		<td>邮箱未验证</td>
	                		<td>
	                			<div class="btn-group">
								  <button  type="button" class="btn btn-primary update-btn">修改</button>
								  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
								    <span class="caret"></span>
								  </button>
								  <ul class="dropdown-menu" role="menu">
								    <li><a data-toggle="modal" data-target="" href="#">关闭账户</a></li>
								  </ul>
								</div>
	                		</td>
	                	</tr>
	                	<tr>
	                		<td class="text-left">
	                			李淼可二
	                			<a href="#" class="btn-beizhu"  data-toggle="modal" data-title="李淼可"><span class="glyphicon glyphicon-file"></span></a>
	                		</td>
	                		<td>HR</td>
	                		<td>15100235858</td>
	                		<td>010-5964865</td>
	                		<td>l157896543@126.com</td>
	                		<td>邮箱未验证</td>
	                		<td>
	                			<div class="btn-group">
								  <button  type="button" class="btn btn-primary update-btn">修改</button>
								  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
								    <span class="caret"></span>
								  </button>
								  <ul class="dropdown-menu" role="menu">
								    <li><a data-toggle="modal" data-target="" href="#">关闭账户</a></li>
								  </ul>
								</div>
	                		</td>
	                	</tr>
	                </tbody>
	            </table>
            </div>
        </div>
    </div>
</div>

<!--
	作者：595629466@qq.com
	时间：2015-03-14
	描述：修改成员信息弹窗
-->
<form id="update-form" class="form-horizontal container-fluid modal fade" aria-hidden="true"  role="dialog"  >
	<ul class="list-unstyled">
		<li class="row">
			<div class="form-group">
				<label class="col-md-2 control-label"><em class="red">*</em> 员工姓名</label>
				<div class="col-md-8">
					<input type="text" class="form-control" />
				</div>
			</div>
		</li>
		<li class="row">
			<div class="form-group">
				<label class="col-md-2 control-label"><em class="red">*</em> 登录邮箱</label>
				<div class="col-md-8">
					<input type="text" class="form-control" />
				</div>
			</div>
		</li>
		<li class="row">
			<div class="form-group">
				<label class="col-md-2 control-label"><em class="red">*</em> 密码</label>
				<div class="col-md-8">
					<input type="text" class="form-control" />
				</div>
			</div>
		</li>
		<li class="row">
			<div class="form-group">
				<label class="col-md-2 control-label"><em class="red">*</em> 确认密码</label>
				<div class="col-md-8">
					<input type="text" class="form-control" />
				</div>
			</div>
		</li>
		<li class="row">
			<div class="form-group">
				<label class="col-md-2 control-label"><em class="red">*</em> 分组</label>
				<div class="col-md-8">
					<div class="btn-group" id="custom_btn">
					  <button type="button" class="btn btn-primary">HR</button>
					  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					    <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu" role="menu">
					    <li><a  data-toggle="collapse" data-parent="#product" href="#custom_collapse" aria-expanded="true" aria-controls="custom_collapse">自定义</a></li>
					  </ul>
					</div>
				</div>
			</div>
		</li>
		<li class="row"  >
			<div id="custom_collapse" class="panel-collapse collapse">
				<div class="form-group">
					<label class="col-md-2 control-label">新分组名称</label>
					<div class="col-md-8">
						<input type="text" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label">权限：</label>
					<div class="col-md-8">
						
					</div>
				</div>
				<ul class="list-unstyled">
					<li>
						<div class="col-md-6">
							<label class="col-md-6 text-right">关于职位权限</label>
						</div>
						<div class="col-md-6">
							<label class="col-md-7 text-right">关于候选人权限</label>
						</div>
					</li>
					<li>
						<div class="col-md-6 ">
							<ul class="list-unstyled">
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
							</ul>
							
						</div>
						<div class="col-md-6 ">
							<ul class="list-unstyled">
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-right"><input type="checkbox">发布职位</li>
								<li  class="col-md-6 text-left"><input type="checkbox">发布职位</li>
							</ul>
							
						</div>
					</li>
				</ul>
			</div>
		</li>
	</ul>
</form>

<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/jquery.searchbox.animate.js"></script>
<script src="../../Scripts/bootbox.min.js"></script>
<script src="../../Scripts/base.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function(){
		//读取共用的头部和菜单文件
		$("#header").load("../public/head.html nav",function(){
			$('[data-toggle="tooltip"]').tooltip();  //头部鼠标划过提示
			$('.search-box').searchbox({speed:500}); //头部搜索
		});
		//读取共用的左侧文件
		$('#left').load('../public/mainLeft.html .main-left');
		
		//选择内容按钮事件
		$("#btnRadio").radio(function(a){
			//a 为当时单击的按钮
			
		});
		
		/*弹窗*/
		//创建备注弹窗对象
		var modal_form = $("<form></form>");
		var form_content='<div class="form-group">\
							<textarea rows="3" placeholder="请输入备注内容" class=" form-control"></textarea>\
						  </div>\
							<div class=" form-group clearfix">\
								<a href="#" class="btn btn-primary pull-right"> 保存备注</a>\
							</div>\
							<dl>\
								<dt class="page-header">11:31  2015/3/2</dt>\
								<dd>这个人不错，可以这个人不错，可以考虑联系面试这个人不错，可以考虑联系面试考虑联系面试</dd>\
							</dl>\
							<dl>\
								<dt class="page-header">11:31  2015/3/2</dt>\
								<dd>这个人不错，可以考虑联系面试</dd>\
							</dl>\
							<dl>\
								<dt class="page-header">11:31  2015/3/2</dt>\
								<dd>这个人不错，可以考虑联系面试这个人不错，可以考虑联系面试这个人不错，可以考虑联系面试这个人不错，可以考虑联系面试</dd>\
							</dl>\
							<dl>';
		modal_form.append(form_content);
		
		//备注按钮时事件绑定
		$('.btn-beizhu[data-toggle="modal"]').on('click',function(){
			var _title=$(this).attr('data-title');
			var new_event_form = bootbox.dialog({
				title:_title+'的备注'
				,message: modal_form//弹窗对象
				,buttons: {
					"close" : {
						"label" : "取消",
						"className" : "btn btn-default"
					},
					"ok" : {
						"label" : "发送",
						"className" : "btn btn-primary",
						"callback": function() {
							//弹窗发送按钮事件，可执行服务器操作
						}
					} ,
				}
			});
		})
		
		//定义弹窗对象
		var update_form=$('#update-form');
		//修改成员信息弹窗事件绑定
		$('.update-btn').on('click',function(){
			update_form=update_form.removeClass('modal fade')
			bootbox.dialog({
				title:'修改成员信息'
				,message: update_form//弹窗对象
				,buttons: {
					
					"ok" : {
						"label" : "保存",
						"className" : "btn btn-primary",
						"callback": function() {
							//弹窗发送按钮事件，可执行服务器操作
						}
					} ,
				}
			});
		})
		
		
		//自定义分组展开事件
		$('.collapse').on('show.bs.collapse', function () {
			var first_text=$('#custom_btn').find('.btn').first().text();
			var last_text=$('#custom_btn').find('[data-toggle="collapse"]').text();
			$('#custom_btn').find('.btn').first().text(last_text);
			$('#custom_btn').find('[data-toggle="collapse"]').text(first_text)
		}).on('hide.bs.collapse', function () {
			var first_text=$('#custom_btn').find('.btn').first().text();
			var last_text=$('#custom_btn').find('[data-toggle="collapse"]').text();
			$('#custom_btn').find('.btn').first().text(last_text);
			$('#custom_btn').find('[data-toggle="collapse"]').text(first_text)
		})
		
	})
</script>
</body>
</html>
